<html>
	<head>
		<script src="processing.js"></script>
		<style>
			#__processing0
			{
				cursor: none;
			}
		</style>
	</head>
	<body>
		
		<h1 id="tmp"></h1>
		
		<script type="application/processing">
			WIDTH = document.getElementById("__processing0").width;
			HEIGHT = document.getElementById("__processing0").height;
			PROBA_BONUS = 0.6;
			BASE_FALLING_SPEED = 2; // pixels per draw
			IMAGES_COUNT = 15;
			BONUS_POINTS = 10;
			MALUS_POINTS = -20;
			TIMEOUT = 45; // seconds
			
			BONUS = loadImage("bretzel.png");
			MALUS = loadImage("hockeyeur.gif");
			IMAGE_WIDTH = 60;
			IMAGE_HEIGHT = 60;
			
			CURSOR = loadImage("cigogne.gif");
			CURSOR_WIDTH = IMAGE_WIDTH;
			CURSOR_HEIGHT = IMAGE_HEIGHT;
			
			NORMAL_SIZE = 30;
			BIG_SIZE = 40;
			
			
			function MovingImage(image)
			{
				this.x;
				this.y;
				this.image = image;
			}
			 
			MovingImage.prototype.draw = function()
			{
				image(this.image, this.x, this.y, IMAGE_WIDTH, IMAGE_HEIGHT);
			}
			
			
			var images;
			var score;
			var remainingTime;
			var lastRemainingTime;
			
			hasStarted = false;
			mouseIn = false;
			fallingSpeed = BASE_FALLING_SPEED;
			lastStartingTime = 0;
			
			
			function init()
			{
				images = new Array();
				score = 0;
				remainingTime = TIMEOUT;
				lastRemainingTime = remainingTime;
			}
						
			
			/* Verifie si le cercle centré en (x1, y1) et de rayon r1 intersecte
			 * le cercle de centre (x2, y2) et de rayon r2. */
			function circlesIntersect(x1, y1, r1, x2, y2, r2)
			{
				return (sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)) < r1+r2);
			}
			
			
			void setup() 
			{
				init();
				
				size(WIDTH, HEIGHT);
				textSize(NORMAL_SIZE);
				
				background(220);
				
				/* Dessine la bordure. */
				stroke(0);
				noFill();
				rect(0, 0, WIDTH-1, HEIGHT-1);
				noStroke();
				
				fill(0, 150, 0);
				textAlign(CENTER);
				text("Move here to start...!", WIDTH/2, HEIGHT/2);
			}
			

			void draw()
			{
				/* Si le compte à rebours est expiré ou le jeu n'a pas encore
				 * commencé, il n'y a pas besoin de rafraîchir l'affichage. */
				if (remainingTime <= 0 || !hasStarted)
					return;
				
				background(255);
				
				for (i=0; i < IMAGES_COUNT; ++i)
				{
					if (mouseIn)
					{
						MovingImage current = images[i];
						
						/* Si l'image courante a été supprimée, en créer une nouvelle. */
						if (!current)
						{
							current = new MovingImage((Math.random()<PROBA_BONUS)?BONUS:MALUS);
							current.x = Math.random()*(WIDTH-IMAGE_WIDTH)-IMAGE_WIDTH/2;
							current.y = -Math.random()*HEIGHT;
							images[i] = current;
						}
						/* Sinon, si le curseur de la souris est sur l'image courante,
						 * la supprimer. */
						else if (circlesIntersect(mouseX, mouseY, CURSOR_WIDTH/2,
							current.x+IMAGE_WIDTH/2, current.y+IMAGE_HEIGHT/2, IMAGE_WIDTH/2))
						{
							score += (current.image == BONUS)?BONUS_POINTS:MALUS_POINTS;
							if (score < 0)
								score = 0;
							
							images[i] = 0;
							fallingSpeed = BASE_FALLING_SPEED+score/100;
							continue;
						}
						
						current.y += fallingSpeed;
					
						if (current.y > HEIGHT)
							images[i] = 0;
					}
					
					if (images[i])
						images[i].draw();
				}
				
				/* Affiche le score. */
				fill(0);
				textAlign(RIGHT);
				text(score, WIDTH-10, NORMAL_SIZE+2);
				
				/* Met à jour le temps restant si on est en jeu. */
				if (mouseIn)
					remainingTime = lastRemainingTime-(new Date().getTime() - lastStartingTime)/1000;
				
				if (remainingTime > 0)
				{
					/* Affiche le temps restant. */
					fill(255-remainingTime*255/TIMEOUT, 0, 0);
					textAlign(LEFT);
					text(remainingTime, 10, NORMAL_SIZE+2);
					
					if (mouseIn)
						image(CURSOR, mouseX-CURSOR_WIDTH/2, mouseY-CURSOR_HEIGHT/2, CURSOR_WIDTH, CURSOR_HEIGHT);
					else
					{
						fill(0, 0, 0, 85);
						rect(0, 0, WIDTH-1, HEIGHT-1);
				
						fill(0);
						textAlign(CENTER);
						text("Paused", WIDTH/2, HEIGHT/2);
					}
				}
				
				else
				{
					fill(0, 0, 0, 85);
					rect(0, 0, WIDTH-1, HEIGHT-1);
					
					/* Dessine un fond en forme d'ellipse. */
					stroke(0);
					fill(220);
					ellipse(WIDTH/2, HEIGHT/2, WIDTH*2/3, HEIGHT*2/3);
					noStroke();
					
					/* Affiche le message de fin. */
					textSize(BIG_SIZE);
					textAlign(CENTER);
					fill(150, 0, 0);
					text("End!", WIDTH/2, HEIGHT/2-BIG_SIZE);
					text("Your score: "+score, WIDTH/2, HEIGHT/2+BIG_SIZE);
					textSize(NORMAL_SIZE);
					
					fill(0);
					text("(Click to restart)", WIDTH/2, HEIGHT-NORMAL_SIZE/2);
					
					/* Remet le curseur par défaut. */
					document.getElementById("__processing0").style.cursor="default";
					
					hasStarted = false;
				}
				
				/* Dessine la bordure. */
				stroke(0);
				noFill();
				rect(0, 0, WIDTH-1, HEIGHT-1);
				noStroke();
			}
			
			
			void mouseOut()
			{
				lastRemainingTime = remainingTime;
				mouseIn = false;
			}
			
			void mouseOver()
			{
				hasStarted = true;
				mouseIn = true;
				lastStartingTime = new Date().getTime();
			}
			
			void mouseClicked()
			{
				if (remainingTime <= 0)
				{
					init();
					document.getElementById("__processing0").style.cursor="none";
					mouseOver();
				}
			}
		</script>
		
		<canvas width="600" height="400" tabindex="0" id="__processing0"
			style="image-rendering: -webkit-optimize-contrast !important; ">
		</canvas>
		
	</body>
</html>
